<template>
  <div>
    <div class="common_form_search">
      <el-form ref="searchForm" :inline="true" :model="searchForm">
        <el-form-item label="店铺名称">
          <el-input v-model="searchForm.shopname" placeholder="请输入店铺名称" clearable />
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="searchForm.account_num" placeholder="请输入账号" clearable />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="全部" clearable>
            <el-option label="已审核" :value="1" />
            <el-option label="待审核" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="search()">查询</el-button>
          <el-button size="small" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider />
    <div class="flex align-center table-top-btns">
      <h5 class="flex align-center">
        <svg-icon style="margin-right:15px" icon-class="list" :size="15" />数据列表
      </h5>
    </div>
    <el-table v-show="tableData.length > -1" :data="tableData" border>
      <el-table-column align="center" prop="id" label="ID" width="70" />
      <el-table-column align="center" prop="shopname" label="店铺名称" />
      <el-table-column align="center" prop="account_num" label="账号" />
      <el-table-column align="center" label="店铺头像">
        <template slot-scope="scope">
          <el-image style="width:50px;height:50px" fit="fill" :src="$globalObj.imgBaseUrl + scope.row.photo">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline" />
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="people" label="联系人姓名" />
      <el-table-column align="center" prop="contact_tel" width="120" label="联系人手机号" />
      <el-table-column align="center" prop="category_name" label="经营项目" />
      <el-table-column align="center" prop="faptype_name" label="发票类型" />
      <el-table-column align="center" prop="status" label="审核状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status == 1 ? 'success' : scope.row.status == 2 ? 'warning' : 'danger'">
            {{ scope.row.status == 1 ? "已审核" : scope.row.status == 2 ? "待审核" : "拒绝" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="center" label="操作" width="240">
        <template slot-scope="scope">
          <el-button v-if="$hasMethod('#view')" type="primary" size="mini" @click="$router.push({ name: 'supplierView', params: { viewId: scope.row.id } })">查看</el-button>
          <el-button v-if="$hasMethod('#enable')" :type="scope.row.endisable == 1 ? 'danger' : 'warning'" size="mini" @click="enable(scope.row.id, scope.row.endisable)">
            {{ scope.row.endisable == 1 ? "禁用" : "启用" }}
          </el-button>
          <el-dropdown v-if="$hasMethod('#edit')" @command="command => handleMore(command, scope.row)">
            <span class="el-dropdown-link blue-font pointer" style="margin-left:10px">
              更多操作<i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-if="$hasMethod('#edit')" command="edit">编辑资料</el-dropdown-item>
              <el-dropdown-item v-if="$hasMethod('#setWithdraw')" command="setWithdraw">设置提现</el-dropdown-item>
              <el-dropdown-item v-if="$hasMethod('#onlinePay')" command="onlinePay">线上支付</el-dropdown-item>
              <el-dropdown-item v-if="$hasMethod('#offlinePay')" command="offlinePay">线下支付</el-dropdown-item>
              <el-dropdown-item v-if="$hasMethod('#contract')" command="edit">发起合同</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <custom-page ref="customPage" :total="total" @getList="getList" />
  </div>
</template>

<script>
import { getSupplierList, editSupplier } from '@/api/user'
import customPage from '@/components/customPage'
export default {
  components: { customPage },
  // props: ['shopname'],
  props: {
    shopname: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      searchForm: {
        shopname: '',
        account_num: '',
        status: null
      },
      total: 0,
      tableData: [],
      routerName: ''
    }
  },
  // computed: {
  //   shopname(){
  //     console.log('shopname1',this.$route.query.shopname)
  //   }
  // },
  created() {
    // console.log('shopname1',this.$route.query.shopname)
    if (this.$route.query.shopname) {
      this.routerName = this.$route.query.shopname
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    handleMore(command, item) {
      // console.log(command, item)
      // this.selectedItem = item;
      if (command === 'edit') {
        // 编辑资料
        this.$router.push({ name: 'supplierView', params: { viewId: item.id, toEdit: true }})
      } else {
        // 查看备注
      }
    },
    // 查询
    search() {
      this.$refs.customPage.page = 1
      this.getList()
    },
    // 重置
    reset() {
      this.searchForm = {
        shopname: '',
        account_num: '',
        status: null
      }
      this.routerName = ''
      this.getList()
    },
    // 启用/禁用
    enable(id, endisable) {
      editSupplier({
        id,
        endisable: endisable === 1 ? 2 : 1
      }).then(res => {
        this.getList(true)
      })
    },
    getList(flag) {
      // flag为true, 则不刷新表格
      const { page, pageSize } = this.$refs.customPage
      if (!flag) {
        this.tableData = []
      }
      this.searchForm.shopname = this.searchForm.shopname || this.routerName
      getSupplierList({ page, pageSize, ...this.searchForm }).then(res => {
        this.tableData = res.data || []
        this.total = res.total
      })
    }
  },
  beforeRouteEnter(to, from, next) {
    if (from.name === 'supplierView') {
      next(vm => {
        vm.getList()
      })
    } else {
      next()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
